/*
 This file 'zdwxy_1' is part of Firebird Integrated Solution 1.0

 Copyright (c) 2020 Lincong

 Contact:  
        Email: lincong1987@gmail.com

        QQ: 159257119
 
 See Usage at http://www.jplatformx.com/firebird

 Create date: 2020-06-14 20:49
 */

define(function (require, exports, module) {

	require("../model/Chart");

	echarts.registerMap('china', require("../assets/map/json/china.json"))

	var ArrayUtils = require("../assets/ArrayUtils");

	var id = "zdwxy_5";

	Firebird.define(id, {
		extend: "Chart",
		setValue: function (data) {


			/**
			 * 绘制左侧面
			 */
			var CubeLeft = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0
				},
				buildPath: function (ctx, shape) {
					// 会canvas的应该都能看得懂，shape是从custom传入的
					var xAxisPoint = shape.xAxisPoint
					// 注意 p0 是起点，是 x 跟 y 的交点
					var p0 = [shape.x, shape.y];
					var p1 = [shape.x - 20, shape.y - 10];
					var p2 = [xAxisPoint[0] - 20, xAxisPoint[1] - 10];
					var p3 = [xAxisPoint[0], xAxisPoint[1]];
					ctx
						.moveTo(p0[0], p0[1])
						.lineTo(p1[0], p1[1])
						.lineTo(p2[0], p2[1])
						.lineTo(p3[0], p3[1])
						.closePath();
				}
			});

			/**
			 * 绘制右侧面
			 */
			var CubeRight = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0
				},
				buildPath: function (ctx, shape) {
					var xAxisPoint = shape.xAxisPoint;
					var p0 = [shape.x, shape.y];
					var p1 = [xAxisPoint[0], xAxisPoint[1]];
					var p2 = [xAxisPoint[0] + 20, xAxisPoint[1] - 10];
					var p3 = [shape.x + 20, shape.y - 10];
					ctx
						.moveTo(p0[0], p0[1])
						.lineTo(p1[0], p1[1])
						.lineTo(p2[0], p2[1])
						.lineTo(p3[0], p3[1])
						.closePath();
				}
			});

			/**
			 * 绘制顶面
			 */
			var CubeTop = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0
				},
				buildPath: function (ctx, shape) {
					var p0 = [shape.x, shape.y];
					var p1 = [shape.x + 20, shape.y - 10];
					var p2 = [shape.x + 0, shape.y - 20];
					var p3 = [shape.x - 20, shape.y - 10];
					ctx
						.moveTo(p0[0], p0[1])
						.lineTo(p1[0], p1[1])
						.lineTo(p2[0], p2[1])
						.lineTo(p3[0], p3[1])
						.closePath();
				}
			});

			// 注册三个面图形
			echarts.graphic.registerShape('CubeLeft', CubeLeft);
			echarts.graphic.registerShape('CubeRight', CubeRight);
			echarts.graphic.registerShape('CubeTop', CubeTop);


			// 背景最大值
			var dataMax = [
				{
					value: 100,
				}, {
					value: 100,
				}, {
					value: 100,
				}, {
					value: 100,
				}, {
					value: 100,
				}
			];
			/**
			 * 棱柱数值及颜色配置
			 * [
					72, // 数值
			        // 背景 左, 右, 中
					"rgba(194, 157, 58, 0.3)", "rgba(194, 157, 58, 0.3)", "rgba(194, 157, 58, 0.3)",
					// 棱柱 左, 右, 中
			 		"rgba(194, 157, 58, 1)", "rgba(172, 137, 43, 1)", "rgba(127, 107, 63, 1)"

				]
			 * @type {(number|string)[][]}
			 */
			var data = [
				{
					value: 72,
					color: [
						"rgba(194, 157, 58, 0.3)", "rgba(194, 157, 58, 0.3)", "rgba(194, 157, 58, 0.3)",
						"rgba(194, 157, 58, 1)", "rgba(172, 137, 43, 1)", "rgba(127, 107, 63, 1)"
					]
				},

				{
					value: 21,
					color: [
						"rgba(37, 144, 87, 0.3)", "rgba(37, 144, 87, 0.3)", "rgba(37, 144, 87, 0.3)",
						"rgba(37, 144, 87, 1)", "rgba(26, 130, 74, 1)", "rgba(37, 112, 72, 1)"
					]

				},

				{
					value: 69,
					color: [
						"rgba(55, 94, 207, 0.3)", "rgba(55, 94, 207, 0.3)", "rgba(55, 94, 207, 0.3)",
						"rgba(55, 94, 207, 1)", "rgba(44, 81, 187, 1)", "rgba(40, 68, 156, 1)"
					]
				},

				{
					value: 29,
					color: [
						"rgba(210, 87, 67, 0.3)", "rgba(210, 87, 67, 0.3)", "rgba(210, 87, 67, 0.3)",
						"rgba(210, 87, 67, 1)", "rgba(187, 72, 53, 1)", "rgba(169, 64, 47, 1)"
					]
				},

				{
					value: 7,
					color: [
						"rgba(127, 51, 39, 0.3)", "rgba(127, 51, 39, 0.3)", "rgba(127, 51, 39, 0.3)",
						"rgba(127, 51, 39, 1)", "rgba(127, 51, 39, 1)", "rgba(81, 34, 27, 1)"
					]
				}
			];

			var option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					},
					formatter: function (params, ticket, callback) {
						var item = params[1]
						return item.name + ' : ' + item.value;
					}
				},
				grid: {
					left: 120,
					right: 30,
					bottom: 10,
					top: 50,
					containLabel: true
				},
				xAxis: {
					type: 'category',
					data: ['温度', '压力', '液位', '可燃', '有毒'],
					axisLine: {
						show: false,
						lineStyle: {
							color: 'white'
						}
					},
					offset: 5,
					axisTick: {
						show: false,
						length: 9,
						alignWithLabel: true,
						lineStyle: {
							color: '#7DFFFD'
						}
					},
					axisLabel: {
						show: true,
						fontSize: 16,
						color: "rgba(255, 255, 255, 1)"
					}
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false,
						lineStyle: {
							color: 'white'
						}
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						show: false,
						fontSize: 16,
						color: "rgba(255, 255, 255, 1)"
					},
				},
				series: [
					// 棱柱背景
					{
						// 棱柱背景
						type: 'custom',
						renderItem: function (params, api) {
							var location = api.coord([api.value(0), api.value(1)]);

							var color = data[params.dataIndex].color;

							return {
								type: 'group',
								children: [
									{
										type: 'CubeLeft',
										shape: {
											api,
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0])
										},
										style: {
											fill: color[0]
										}
									}, {
										type: 'CubeRight',
										shape: {
											api,
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0])
										},
										style: {
											fill: color[1]
										}
									}, {
										type: 'CubeTop',
										shape: {
											api,
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0])
										},
										style: {
											fill: color[2]
										}
									}
								]
							}
						},
						data: dataMax
					}, // 棱柱高亮
					{
						type: 'custom',
						renderItem: function (params, api) {
							var location = api.coord([api.value(0), api.value(1)]);

							var color = data[params.dataIndex].color;

							return {
								type: 'group',
								children: [
									{
										type: 'CubeLeft',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0])
										},
										style: {
											fill: color[3],

										}
									}, {
										type: 'CubeRight',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0])
										},
										style: {
											fill: color[4],
										}
									}, {
										type: 'CubeTop',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0])
										},
										style: {
											fill: color[5],
										}
									}
								]
							}
						},
						data: data
					}, // 顶部文字
					{
						type: 'bar',
						label: {
							normal: {

								show: true,
								position: "top",
								fontSize: 16,
								color: '#fff',
								offset: [0, -25],
								formatter: function (node) {
									switch (node.name) {
										// '温度', '压力', '液位', '可燃', '有毒'
										case '温度':
											return data[0].value
										case '压力':
											return data[1].value
										case '液位':
											return data[2].value
										case '可燃':
											return data[3].value
										case '有毒':
											return data[4].value
									}
								}
							}
						},

						itemStyle: {
							color: 'transparent'
						},
						tooltip: {},
						data: dataMax
					}
				]
			}

			this.clear();
			this.setOption(option, true);
		},
	});

	module.exports = Firebird.create(id, {id: id});
});